{% extends "base.html" %}

{% block title %}Minijack: Live of Everything{% endblock %}

{% block javascripts %}
  <script type="text/javascript" language="javascript">
    $(document).ready(function() {
      $("#result_table").dataTable({
        "aLengthMenu": [[20, 40, 60, 80, 100, 200, -1],
                        [20, 40, 60, 80, 100, 200, "All"]],
        "aaSorting": [],
        "bJQueryUI": true,
        "iDisplayLength": 100,
        "oColVis": {
          "sSize": "css",
          "sAlign": "right",
        },
        "sDom": "<lCfr><ip>t<ip>",
        "sPaginationType": "full_numbers",
        "aoColumns": [{% for column in column_list %}
          {"sTitle": "{{ column }}"},{% endfor %}
        ],
        "aaData": [{% for result in result_list %}
          [{% for item in result %}
            "{{ item|escapejs }}", {% endfor %}
          ],{% endfor %}
        ],
      });
    });
  </script>
{% endblock %}

{% block body %}
  <h1>Minijack: Life of Everything</h1>

  <h2><form method="get" action="{% url 'query' %}">
    <label for="serach_input">SQL Query ></label>
    <input type="text" name="s" value="{{ sql_query }}"
      class="querybox" autofocus autocomplete="off"/>
  </form></h2>

  {% if error_message %}
  <h3 style="color:red">{{ error_message|linebreaks }}</h3>
  {% elif usage_message %}
  <h3>{{ usage_message|safe }}</h3>
  {% else %}
  <table id="result_table">
  </table>
  {% endif %}
{% endblock %}
